<template>
    <a-layout>
        <a-layout-sider width="200" style="background: #fff">
            <a-menu
                    v-model:selectedKeys="selectedKeys2"
                    v-model:openKeys="openKeys"
                    mode="inline"
                    :style="{ height: '100%', borderRight: 0 }"
            >
                <a-sub-menu key="sub1">
                    <template #title>
              <span>
                <user-outlined/>
                subnav 111
              </span>
                    </template>
                    <a-menu-item key="1">option1</a-menu-item>
                    <a-menu-item key="2">option2</a-menu-item>
                    <a-menu-item key="3">option3</a-menu-item>
                    <a-menu-item key="4">option4</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                    <template #title>
              <span>
                <laptop-outlined/>
                subnav 2
              </span>
                    </template>
                    <a-menu-item key="5">option5</a-menu-item>
                    <a-menu-item key="6">option6</a-menu-item>
                    <a-menu-item key="7">option7</a-menu-item>
                    <a-menu-item key="8">option8</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                    <template #title>
              <span>
                <notification-outlined/>
                subnav 3
              </span>
                    </template>
                    <a-menu-item key="9">option9</a-menu-item>
                    <a-menu-item key="10">option10</a-menu-item>
                    <a-menu-item key="11">option11</a-menu-item>
                    <a-menu-item key="12">option12</a-menu-item>
                </a-sub-menu>
            </a-menu>

        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
            <!--        <a-breadcrumb style="margin: 16px 0">-->
            <!--          <a-breadcrumb-item>Home</a-breadcrumb-item>-->
            <!--          <a-breadcrumb-item>List</a-breadcrumb-item>-->
            <!--          <a-breadcrumb-item>App</a-breadcrumb-item>-->
            <!--        </a-breadcrumb>-->
            <a-layout-content
                    :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
                <!--                内容列表-->
                <a-list item-layout="vertical" size="large" :grid="{gutter:20, column:3}"
                        :pagination="pagination" :data-source="ebooks">
<!--                    <template #footer>-->
<!--                        <div>-->
<!--                            <b>ant design vue</b>-->
<!--                            footer part-->
<!--                        </div>-->
<!--                    </template>-->
                    <template #renderItem="{ item }">
                        <a-list-item key="item.name">
                            <template #actions>
          <span v-for="{ type, text } in actions" :key="type">
            <component :is="type" style="margin-right: 8px"/>
            {{ text }}
          </span>
                            </template>

                            <a-list-item-meta :description="item.description">
                                <template #title>
                                    <a :href="item.href">{{ item.name }}</a>
                                </template>
                                <template #avatar>
                                    <a-avatar :src="item.cover"/>
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </template>
                </a-list>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script lang="ts">
    import {defineComponent, ref, reactive, toRef, toRefs, onMounted} from 'vue';
    import {StarOutlined, LikeOutlined, MessageOutlined} from '@ant-design/icons-vue';
    import axios from 'axios';

    const listData: Record<string, string>[] = [];
    for (let i = 0; i < 23; i++) {
        listData.push({
            href: 'https://www.antdv.com/',
            title: `ant design vue part ${i}`,
            avatar: 'https://joeschmoe.io/api/v1/random',
            description:
                'Ant Design, a design language for background applications, is refined by Ant UED Team.',
            content:
                'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
        });
    }

    export default defineComponent({
        name: 'HomeView',
        components: {
            StarOutlined,
            LikeOutlined,
            MessageOutlined,
        },
        setup() {

            const pagination = {
                onChange: (page: number) => {
                    console.log(page);
                },
                pageSize: 10,
            };
            const actions: Record<string, string>[] = [
                {type: 'StarOutlined', text: '156'},
                {type: 'LikeOutlined', text: '156'},
                {type: 'MessageOutlined', text: '2'},
            ];

            const ebooks = ref();
            const ebooks1 = reactive({
                books: {
                    "id": 1,
                    "name": "",
                    "category1Id": null,
                    "category2Id": null,
                    "description": "",
                    "cover": null,
                    "docCount": 0,
                    "viewCount": 0,
                    "voteCount": 0
                },
            });
            onMounted(() => {
                axios.get("/ebook/list").then(
                    response => {
                        const data = response.data;
                        ebooks.value = data.content;
                        ebooks1.books = data.content;
                    },
                    // error => {
                    //     console.log('请求error' + error.message)
                    // }
                )
            })
            return {
                ebooks,
                // ebooks1,
                //所有对象的属性是响应式 第一个参数整个对象，第二个参数是对象中属性 ==》响应式
                // books:toRef(ebooks1,"books"),
                ...toRefs(ebooks1),
                listData,
                pagination,
                actions,
            }
        }
    });
</script>
<style scoped>
    .ant-avatar{
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 8%;
        margin: 5px 0;
    }
</style>
